<html>
<head>
  <script type="text/javascript" src="./js/jWebSocket.js"><!--//--></script>
  <script type="text/javascript" src="./js/jquery-1.4.2.min.js"><!--//--></script>
  <script type="text/javascript" src="./js/bristle.js"><!--//--></script>

  <script type="text/javascript">
    function connect() {
      connector = new Bristle.BaseConnector();
      connector.openConnection();
    }

    var reverseCallback = function(response) {
      alert("Reversed value: " + response.reversedValue);
    };

    function revert() {
      var params = {};
      params.value = document.getElementById("reverseWordInput").value;
      connector.requestAction("reverseAction", params, reverseCallback);
    }

    function closeConnection() {
      connector.closeConnection();
    }
  </script>

</head>

<body>
<div>
  <span>Connect to bristleback server</span>
  <input type="button" onclick="connect()" value="connect"/>
</div>
<div>
  <span>Close connection to server</span>
  <input type="button" onclick="closeConnection()" value="closeConnection"/>
</div>
<div>
  <span>Type word to revert</span>
  <input type="text" name="reverseWordInput" id="reverseWordInput"/>
  <input type="button" onclick="revert()" value="reverse"/>
</div>

</body>
</html>